<%--
  Created by IntelliJ IDEA.
  User: 24266
  Date: 2023/12/9
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>图书管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description"
          content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">借阅图书</h4>
                请选择对应的借书卡来借阅。
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>借书卡</label>
                    <select class="form-control m-b" id="borrowCard" name="borrowCard">
                    </select>
                    <input type="hidden" id="bookId" name="bookId">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submitData()">保存</button>
            </div>
        </div>
    </div>
</div>

</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <c:forEach items="${list}" var="entity">
                        <li class="">
                            <a data-toggle="tab" class="tab-${entity.id}" href="#tab-${entity.id}" aria-expanded="true">${entity.name}</a>
                        </li>
                    </c:forEach>
                </ul>
                <div class="tab-content">
                    <c:forEach items="${list}" var="entity">
                        <div id="tab-${entity.id}" class="tab-pane">
                            <div class="panel-body">
                                <div class="row">
                                    <c:forEach items="${entity.books}" var="book">
                                        <div class="col-sm-4">
                                            <div class="contact-box">
                                                <div class="col-sm-4">
                                                    <div class="text-center">
                                                        <img alt="image" class="m-t-xs img-responsive" src="/sys/downloadServlet?fileName=${book.img}" width="100" height="100">
                                                        <div class="m-t-xs font-bold"></div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-8">
                                                    <h3><strong>${book.name}</strong></h3>
                                                    <p>作者：${book.author}
                                                    </p>
                                                    <address>
                                                        价格：<strong style="color: red">${book.price}</strong><br>
                                                        出版社：${book.publish}<br>
                                                        <div style="width:260px;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;">简介：${book.notes}</div>
                                                        <c:if test="${book.state == 0}"><button type="button"  onclick="goBorrowing(${book.id})" data-target="#myModal"
                                                                                                style="margin-top: 5px" class="btn btn-w-m btn-primary">借阅</button></c:if>
                                                        <c:if test="${book.state != 0}"><button type="button" style="margin-top: 5px" class="btn btn-w-m btn-default">借出</button></c:if>

                                                    </address>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 全局/js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.7"></script>


<!-- Peity -->
<script src="/js/plugins/peity/jquery.peity.min.js"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>

<!-- Sweet alert -->
<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>


<!-- iCheck -->
<script src="/js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="/js/demo/peity-demo.js"></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $(".tabs-container .nav-tabs li").click(function (data){
            var href = $(this).children()[0].href
            // 做字符串的截取操作
            var aId = href.substring(href.lastIndexOf('tab-'),href.length);
            // 先给所有的 class= tab-pane 的都移除掉 active 属性
            $(".tab-pane").removeClass('active')
            // 然后单独给当前点击的添加 active 属性
            $("#"+aId).addClass("active")

        })
        initTab()
    });

    function initTab(){
        var li = $(".tabs-container .nav-tabs").children()[0];
        $(li).addClass('active')
        var href = $($(".tabs-container .nav-tabs").children()[0]).children()[0].href
        // 做字符串的截取操作
        var aId = href.substring(href.lastIndexOf('tab-'),href.length);
        // 先给所有的 class= tab-pane 的都移除掉 active 属性
        $(".tab-pane").removeClass('active')
        // 然后单独给当前点击的添加 active 属性
        $("#"+aId).addClass("active")
    }

    function removeData(id) {
        swal({
            title: "您确定要删除这条信息吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {

            swal("删除成功！", "您已经永久删除了这条信息。", "success");
            $.get("/book/bookServlet?action=remove&id=" + id, function (msg) {
                // 再发起一个查询的操作
                window.location.href = "/book/bookServlet?action=list"
            })

        });
    }
    function goBorrowing(bookId){
        //判断是否有可用的借书卡
        $.get("/book/borrowCardServlet?action=checkHaveCard",function (data){
            console.log("data",data)
            if (data.msg === "ok"){
                //表示可以借阅
                $("#bookId").val(bookId)
                var option = ""
                //下拉菜单信息
                for (var i = 0;i<data.cards.length;i++){
                    var card = data.cards[i]
                    option +="<option value='"+card.id+"'>"+card.id +" ["+timestampToDate(card.starttime)+" ~ "+timestampToDate(card.endtime)+"]"+"</option>"
                    console.log(option)
                }
                $("#borrowCard").html(option)
                //打开模态框
                $("#myModal").modal();
            }else {
                //表示不能借阅
                swal("借阅失败！", "可以使用的借书卡不够，请申请后借阅。", "warning");
            }

        })

    }
    function timestampToDate(timestamp){
        var data = new Date(timestamp);
        var year = data.getFullYear();
        var mouth = data.getMonth() + 1 < 10 ? "0" + (data.getMonth()+1):(data.getMonth()+1)
        var day = data.getDate() < 10 ? "0"+ data.getDate():data.getDate();
        return year + "-" + mouth + "-" + day;


    }
    //提交借阅信息
    function submitData(){
        var bookId = $("#bookId").val()
        var cardId = $("#borrowCard").val()
        $.get("/book/borrowRecoderServlet?action=saveOrUpdate&bookId="+bookId + "&cardId="+cardId,function (data){
            //重新定向
            location.href="/book/showBookServlet"
        })
    }

</script>

<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->

</body>

</html>
